<template>
  <div class="mainbody">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item >{{ mainName }}</el-breadcrumb-item>
        <el-breadcrumb-item >{{facName}}</el-breadcrumb-item>
        <h3>个人主页</h3>
      </el-breadcrumb>
    <div style="width:100%;height:5px;">&nbsp;</div>
    <div v-if="routerFlag == 'singlePage'">
      <!-- <el-form ref="form" :model="singlePageForm" label-width="100px">
        <el-form-item label="轮播图路径">
          <el-input v-model="singlePageForm.mainImage" style="top: 5px;"></el-input>
        </el-form-item>
      </el-form> -->
      <!-- <el-descriptions class="margin-top" :column="3" border="1px">
        <el-descriptions-item :column="1">
          <template slot="label">
            <el-button type="warning" icon="el-icon-user-solid" circle></el-button>
            用户名{{ this.nickName }}
          </template>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            手机号
          </template>
          18100000000
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            居住地
          </template>
          苏州市
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            备注
          </template>
          <el-tag size="small">学校</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            我的收货地址
          </template>
          江苏省苏州市吴中区吴中大道 1188 号
        </el-descriptions-item>
      </el-descriptions> -->
      <div class="userInfor">
        <el-row>
          <el-col :span="5">
            <div style="">
              <el-button type="warning" icon="el-icon-user-solid" circle></el-button>
              用户名
              {{ this.nickName }}
            </div>
          </el-col>
          <el-col :span="5">
            <div>
              <i class="el-icon-mobile-phone"></i>
              手机号:18100000000
            </div>
          </el-col>
          <el-col :span="5">
            <div>
              <i class="el-icon-office-building"></i>
              <el-button type="text" @click="goToAddressPage">我的收货地址</el-button>
            </div>
          </el-col>
          <el-col :span="9">
            <div>
              我的余额&nbsp;&nbsp;{{ getBlance }}&nbsp;&nbsp;
              <el-input v-model="blance" placeholder="请输入充值金额" style="width: 130px;height: 40px;"></el-input>
              <el-button type="text" @click="chargeBlance">充值</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="userInformation">
        <el-row>
          <el-col :span="5">
            <div class="cell">
              待付款
            </div>
          </el-col>
          <el-col :span="5">
            <div class="cell">
              待发货
            </div>
          </el-col>
          <el-col :span="5">
            <div class="cell">
              待收货
            </div>
          </el-col>
          <el-col :span="5">
            <div class="cell" @click="goToComment">
              待评价
            </div>
          </el-col>
          <el-col :span="4">
            <div>
              退款
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
  
  <script>
  import {userInfo,chargeUserBlance} from "../../ajax/get"
//   import {addGoodsOrder} from "../ajax/post"
//   import defaultValue from "../utils/defalutValue"
  export default {
      name: "singlePage",
      data () {
          return {
            mainName:"全部功能",
            routerFlag: "singlePage",
            facName:"个人主页",
            nickName:"",
            userName:"",
            getBlance:0,//获取的金额数
            blance:"",//充值的金额
            // singlePageForm:{},//个人主页对象
          };
      },
      methods: {
        goToComment(){
          this.$router.push({
                path: '/personalHomepag/Comment',
                query: {
                    path: 'personalHomepage/singlePage'
                }
            })
        },
          // 查找用户信息
        findUserInfo(userName) {
            userInfo(userName).then(res => {
                console.log("用户信息:",res);
                this.nickName = res.data.data.nickName;
                this.userName = res.data.data.userName;
                this.getBlance = res.data.data.blance;
            })
        },
        goToAddressPage(){
          this.$router.push({
                path: '/personalHomepage/AddressPage',
                query: {
                    path: 'personalHomepage/singlePage'
                }
            })
        },
        // 充值余额
        chargeBlance(){
          chargeUserBlance(this.blance,this.userName).then(res =>{
            console.log("充值余额",res);
            this.findUserInfo(sessionStorage.getItem("userName"));
          })
        }
      },
      created() {
        this.findUserInfo(sessionStorage.getItem("userName"));
      }
  }
  </script>
  
  <style scoped>
    @import "../../assets/css/singlePage.css";
  </style>